<template>
    <div class="steps">
        <div class="step-t">
            <div class="stept-l">
                <p class="p1">{{textTitle}}</p>
                <p class="p2">{{created}}</p>
            </div>
            <div class="stept-r">
                <div class="p1">{{money}}￥</div>
            </div>
        </div>
        <div class="line"></div>
        <van-steps
            direction="vertical"
            :active="stepsData.length - 1"
            active-color="#bf2071"
        >
            <van-step
                v-for="(item, index) in stepsData"
                :key="index"
            >
                <p
                    class="step-p1"
                    v-text="item.title"
                ></p>
                <p class="step-p2">{{ item.created }}</p>
            </van-step>
        </van-steps>
        <cusser></cusser>
        <div class="btn-db">
            <button-normal
                widthPro="200"
                heightPro="35"
                :textBtn="textBtn"
                color="#fff"
                size="14"
                @click.native="sure"
            ></button-normal>
        </div>
    </div>
</template>

<script>
import buttonNormal from '../components/common/buttonNormal';
// import api from '@/request/api';
import cusser from '@/components/common/cusser';
import dayjs from 'dayjs';

export default {
    name: 'capitalSteps',
    components: { buttonNormal, cusser },
    data() {
        return {
            stepsData: [{
                title: '转账成功',
                // created: dayjs(new Date).format('YYYY-MM-DD HH:mm:ss')
                created: dayjs(new Date).format('YYYY-MM-DD HH:mm')
            }],
            textTitle: '',
            created: dayjs(new Date).format('YYYY-MM-DD HH:mm'),
            money: '',
            textBtn: '完成'
        };
    },
    computed: {},
    created() {
        let propsData = this.$route.query;
        if (propsData.type === 1) {
            //    转账
            this.textTitle = '转账-' + propsData.name;
            this.stepsData = [{ title: '转账成功', created: dayjs(new Date).format('YYYY-MM-DD HH:mm') }];
            this.money = propsData.money;
        } else if (propsData.type === 2) {
            //    提现
            this.textTitle = '提现到微信';
            this.money = propsData.money;
            this.stepsData = [{ title: propsData.title, created: dayjs(new Date).format('YYYY-MM-DD HH:mm') }];
        }

    },
    methods: {
        sure() {
            this.$router.push('user');
        }
    },
    watch: {}
};
</script>

<style lang="stylus" scoped>
@import '~assets/main.styl';

.steps {
    .step-t {
        width: 100%;
        padding: 0 cellPadding;
        box-sizing: border-box;
        background: white;
        flex-x();
        height: 14vw;

        .stept-l {
            flex: 1;

            .p1 {
                word-vw(16px, gray3);
                line-height: 1.6;
            }

            .p2 {
                word-vw(14px, gray9);
            }
        }

        .stept-r {
            .p1 {
                word-vw(18px, gray3);
            }
        }
    }

    .step-p1 {
        color: gray6;
        font-size: word14;
        margin-bottom: vw(5);
    }

    .step-p2 {
        color: gray6;
        font-size: word12;
    }

    .btn-db {
        position: absolute;
        width: 100vw;
        bottom: 0;
    }
}

>>> .van-step--process {
    .step-p1 {
        color: main-color;
        font-size: word14;
    }
}

>>> .van-step__title {
    h3 {
        color: #000;
    }
}

>>> .van-step--vertical .van-step__line {
    background: grayE;
}

>>> .van-step .van-step__circle {
    background: grayE;
}

>>> .van-step--vertical {
    padding: 14px 10px 14px 0;
}
</style>
